<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container v-if="addVisible" :disabled="formDisabled">

      <a-form :form="form" slot="detail">
        <a-tabs type="card" v-model="mhkey">
          <a-tab-pane key="1" tab="MBL制作">
            <a-tabs v-model="mblactiveKey" type="editable-card" tabPosition="left" @edit="mblonEdit">
              <a-tab-pane v-for="(pane,index) in MBLpanes" :key="pane.key" :tab="pane.title" :closable="pane.closable">

                <a-row>
                  <a-col :span="24">
                    <a-form-item label="提单名称" :labelCol="labelCol2" :wrapperCol="wrapperCol">
                      <a-input v-if="isDisableMBL" style="width: 200px" v-model="pane.title" disabled
                               placeholder="提单"></a-input>
                      <a-input v-else style="width: 200px" v-model="inputcontent"
                               placeholder="提单"></a-input>
                      <a-button v-show="isDisableMBL" style="margin-left: 10px" type="primary"
                                @click="changeMBLName(pane.title)" icon="edit">
                        修改
                      </a-button>
                      <a-button v-show="!isDisableMBL" style="margin-left: 10px" @click="changeNameMBLCance(index)">
                        取消
                      </a-button>
                      <a-button v-show="!isDisableMBL" style="margin-left: 10px" type="primary"
                                @click="confirmMBLName(index)">
                        确定
                      </a-button>
                    </a-form-item>
                  </a-col>

                  <a-col :span="24">
                    <a-form-item label="关单号" :labelCol="labelCol2" :wrapperCol="wrapperCol">
                      <!--                      <a-select-->
                      <!--                        mode="multiple" style="width: 200px;" v-model="pane.customsNumber">-->
                      <!--                        <a-select-option v-for="item in mainOffNumberData" :key="item" :value="item">-->
                      <!--                          {{ item }}-->
                      <!--                        </a-select-option>-->

                      <!--                      </a-select>-->
                      <a-input v-model="pane.customsNumber" style="width: 330px;" placeholder="关单号"></a-input>

                    </a-form-item>
                  </a-col>

                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="发货人" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-model="pane.consignor" placeholder="请输入发货人"></a-textarea>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="收货人" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-model="pane.consignee" placeholder="请输入收货人"></a-textarea>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="通知人" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-model="pane.notifier" placeholder="请输入通知人"></a-textarea>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="第二通知人" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-model="pane.secNotifier" placeholder="请输入第二通知人"></a-textarea>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="国外代理" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-model="pane.formForeignAgent" placeholder="请输入国外代理"></a-textarea>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="唛头" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-model="pane.shipMarks" placeholder="请输入唛头"></a-textarea>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item label="货物描述" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-model="pane.enName" placeholder="SHIPPER'S LOAD COUNT&SEAL
SAID TO CONTAIN"></a-textarea>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">

                    <a-form-item label="付款方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-model="pane.payType"
                                         dictCode="pay_type"
                                         placeholder="请选择付款方式" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="运输条款" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-model="pane.transportClause"
                                         dictCode="transport_clause"
                                         placeholder="请选择运输条款" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="提单形式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-dict-select-tag type="list" v-model="pane.formLading"
                                         dictCode="form_lading"
                                         placeholder="请选择提单形式" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <!--            <a-row>-->
                <!--              <a-table :columns="columns" :data-source="data" :pagination="false" bordered>-->


                <!--                <template slot="footer" >-->
                <!--                 <a-row justify="space-between">-->
                <!--                   <a-col :span="8">-->
                <!--                     合计：0-->
                <!--                   </a-col>-->
                <!--                   <a-col :span="3" :offset="13">-->
                <!--                     <a-button type="primary">-->
                <!--                       带入提单数据-->
                <!--                     </a-button>-->
                <!--                   </a-col>-->
                <!--                 </a-row>-->
                <!--                </template>-->
                <!--              </a-table>-->

                <!--            </a-row>-->
                <a-row>
                  <a-col :span="8">
                    <a-form-item label="件数" :labelCol="labelCol" :wrapperCol="wrapperCol">

                      <a-input-group>
                        <a-input
                          style="width: 50%"
                          v-model="pane.pieceNumber"
                          placeholder="件数"
                        />
                        <j-dict-select-tag style="width: 50%" type="list"
                                           v-model="pane.pieceNumberUnit"
                                           dictCode="total_type"
                                           placeholder="请选择" />

                      </a-input-group>

                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="毛重" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-model="pane.totalWeight" placeholder="0" suffix="KGS"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="体积" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-model="pane.totalVolume" placeholder="0" suffix="CBM"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item label="提单备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2"
                                 style="margin-bottom: 26px">
                      <a-textarea :rows="4" v-model="pane.billRemark" placeholder="请输入提单备注"></a-textarea>
                    </a-form-item>
                  </a-col>
                </a-row>

              </a-tab-pane>
            </a-tabs>

          </a-tab-pane>
          <a-tab-pane key="2" tab="HBL制作">
            <a-tabs v-model="hblactiveKey" type="editable-card" tabPosition="left" @edit="hblonEdit">
              <a-tab-pane v-for="(pane,index) in HBLpanes" :key="pane.key" :tab="pane.title" :closable="pane.closable">

                <a-row>
                  <a-col :span="24">
                    <a-form-item label="提单名称" :labelCol="labelCol2" :wrapperCol="wrapperCol">
                      <a-input v-if="isDisableHBL" style="width: 200px" v-model="pane.title" disabled
                               placeholder="提单"></a-input>
                      <a-input v-else style="width: 200px" v-model="inputcontent"
                               placeholder="提单"></a-input>
                      <a-button v-show="isDisableHBL" style="margin-left: 10px" type="primary"
                                @click="changeHBLName(pane.title)" icon="edit">
                        修改
                      </a-button>
                      <a-button v-show="!isDisableHBL" style="margin-left: 10px" @click="changeNameHBLCance(index)">
                        取消
                      </a-button>
                      <a-button v-show="!isDisableHBL" style="margin-left: 10px" type="primary"
                                @click="confirmHBLName(index)">
                        确定
                      </a-button>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item label="主单号" :labelCol="labelCol2" :wrapperCol="wrapperCol">
                      <!--                      <a-select-->
                      <!--                        mode="multiple" style="width: 200px;" v-model="pane.customsNumber">-->
                      <!--                        <a-select-option v-for="item in mainOffNumberData" :key="item" :value="item">-->
                      <!--                          {{ item }}-->
                      <!--                        </a-select-option>-->
                      <!--                      </a-select>-->
                      <a-input v-model="pane.customsNumber" style="width: 330px;" placeholder="主单号"></a-input>

                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item label="分单号" :labelCol="labelCol2" :wrapperCol="wrapperCol">
                      <!--                      <a-select-->
                      <!--                        mode="multiple" style="width: 200px;" v-model="pane.otherCustomsNumber">-->
                      <!--                        <a-select-option v-for="item in otherOffNumberData" :key="item" :value="item">-->
                      <!--                          {{ item }}-->
                      <!--                        </a-select-option>-->
                      <!--                      </a-select>-->
                      <a-input v-model="pane.otherCustomsNumber" style="width: 330px;" placeholder="分单号"></a-input>
                    </a-form-item>
                  </a-col>

                  <a-col :span="8">
                    <a-form-item label="ETD" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <j-date placeholder="请选择时间" v-model="pane.etd"
                              date-format="YYYY-MM-DD" :trigger-change="true" style="width: 100%" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="船名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-model="pane.shipName" placeholder="请输入船名"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="航次" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-model="pane.voyageNumber" placeholder="请输入航次"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-row>
                      <a-col :span="10">
                        <a-form-item label="起运港" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                          <a-select
                            label-in-value
                            v-model="pane.portDeparture"
                            placeholder="选择起运港"
                            style="width: 100%"
                            :filter-option="false"
                            show-search
                            allowClear
                            @search="searchPort"
                            @select="portDataChangePol"
                            :dropdownMatchSelectWidth="false"
                            :getPopupContainer="
                                  triggerNode => {
                                    return triggerNode.parentNode || document.body;
                                  }
                                "
                          >
                            <a-select-option v-for="(d,key) in portData" :value="d.value">
                              {{ d.text }}
                            </a-select-option>
                          </a-select>
                          <!--                              <j-popup-->
                          <!--                                v-decorator="['portDeparture',{initialValue: 'CNTAO/青岛/QINGDAO'}]"-->
                          <!--                                :trigger-change="true"-->
                          <!--                                org-fields="show_text"-->
                          <!--                                dest-fields="portDeparture"-->
                          <!--                                code="port_data"-->
                          <!--                                @callback="popupCallback"/>-->
                        </a-form-item>
                      </a-col>
                      <a-col :span="1">
                      </a-col>
                      <a-col :span="13">
                        <a-form-item label="" :wrapperCol="wrapperCol2">
                          <a-input v-model="pane.polRemark" placeholder=""></a-input>
                        </a-form-item>
                      </a-col>
                    </a-row>

                  </a-col>
                  <a-col :span="12">
                    <a-row>
                      <a-col :span="10">
                        <a-form-item label="卸货港" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                          <!--                              <j-popup-->
                          <!--                                v-decorator="['portDestination']"-->
                          <!--                                :trigger-change="true"-->
                          <!--                                org-fields="wzm"-->
                          <!--                                dest-fields="portDestination"-->
                          <!--                                code="port_data"-->
                          <!--                                @callback="popupCallback" />-->
                          <a-select
                            label-in-value
                            v-model="pane.portDestination"
                            placeholder="选择卸货港"
                            style="width: 100%"
                            :filter-option="false"
                            show-search
                            allowClear
                            @search="searchPort"
                            @select="portDataChangePod"
                            :dropdownMatchSelectWidth="false"
                            :getPopupContainer="
                                triggerNode => {
                                  return triggerNode.parentNode || document.body;
                                }
                              "
                          >
                            <a-select-option v-for="(d,key) in portData" :value="d.value">
                              {{ d.text }}
                            </a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :span="1">
                      </a-col>
                      <a-col :span="13">
                        <a-form-item label="" :wrapperCol="wrapperCol2">
                          <a-input v-model="pane.podRemark" placeholder=""></a-input>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row>
                      <a-col :span="10">
                        <a-form-item label="交货地" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                          <a-select
                            label-in-value
                            v-model="pane.placeDelivery"
                            placeholder="交货地"
                            style="width: 100%"
                            :filter-option="false"
                            show-search
                            allowClear
                            @search="searchPort"
                            @select="portDataChangePlaceDelivery"
                            :dropdownMatchSelectWidth="false"
                            :getPopupContainer="
                                triggerNode => {
                                  return triggerNode.parentNode || document.body;
                                }
                              "
                          >
                            <a-select-option v-for="(d,key) in portData" :value="d.value">
                              {{ d.text }}
                            </a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :span="1">
                      </a-col>
                      <a-col :span="13">
                        <a-form-item label="" :wrapperCol="wrapperCol2">
                          <a-input v-model="pane.placeDeliveryDesc" placeholder=""></a-input>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row>
                      <a-col :span="10">
                        <a-form-item label="目的地" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                          <a-select
                            label-in-value
                            v-model="pane.destination"
                            placeholder="目的地"
                            style="width: 100%"
                            :filter-option="false"
                            show-search
                            allowClear
                            @search="searchPort"
                            @select="portDataChangePlaceDestination"
                            :dropdownMatchSelectWidth="false"
                            :getPopupContainer="
                                triggerNode => {
                                  return triggerNode.parentNode || document.body;
                                }
                              "
                          >
                            <a-select-option v-for="(d,key) in portData" :value="d.value">
                              {{ d.text }}
                            </a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :span="1">
                      </a-col>
                      <a-col :span="13">
                        <a-form-item label="" :wrapperCol="wrapperCol2">
                          <a-input
                            v-model="pane.destinationDesc" placeholder=""></a-input>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row>
                      <a-col :span="10">
                        <a-form-item label="预付地点" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                          <a-select
                            label-in-value
                            v-model="pane.prepaidAt"
                            placeholder="预付地点"
                            style="width: 100%"
                            :filter-option="false"
                            show-search
                            allowClear
                            @search="searchPort"
                            @select="portDataChangePlacePrepaidAt"
                            :dropdownMatchSelectWidth="false"
                            :getPopupContainer="
                                triggerNode => {
                                  return triggerNode.parentNode || document.body;
                                }
                              "
                          >
                            <a-select-option v-for="(d,key) in portData" :value="d.value">
                              {{ d.text }}
                            </a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :span="1">
                      </a-col>
                      <a-col :span="13">
                        <a-form-item label="" :wrapperCol="wrapperCol2">
                          <a-input v-model="pane.prepaidAtDesc" placeholder=""></a-input>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row>
                      <a-col :span="10">
                        <a-form-item label="到付地点" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                          <a-select
                            label-in-value
                            v-model="pane.arrivalPlace"
                            placeholder="到付地点"
                            style="width: 100%"
                            :filter-option="false"
                            show-search
                            allowClear
                            @search="searchPort"
                            @select="portDataChangePlaceArrivalPlace"
                            :dropdownMatchSelectWidth="false"
                            :getPopupContainer="
                                triggerNode => {
                                  return triggerNode.parentNode || document.body;
                                }
                              "
                          >
                            <a-select-option v-for="(d,key) in portData" :value="d.value">
                              {{ d.text }}
                            </a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :span="1">
                      </a-col>
                      <a-col :span="13">
                        <a-form-item label="" :wrapperCol="wrapperCol2">
                          <a-input
                            v-model="pane.arrivalPlaceDesc" placeholder=""></a-input>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-col>

                  <a-col :span="20">
                    <a-form-item label="收货地" :labelCol="labelCol1" :wrapperCol="addrwrapper">
                      <a-row>
                        <a-col :span="8">
                          <a-select
                            label-in-value
                            v-model="pane.receiveAddress"
                            placeholder="选择收货地"
                            style="width: 100%"
                            :filter-option="false"
                            show-search
                            allowClear
                            @search="searchPort"
                            @select="portDataChangeReceiveAddress"
                            :dropdownMatchSelectWidth="false"
                            :getPopupContainer="
                                  triggerNode => {
                                    return triggerNode.parentNode || document.body;
                                  }
                                "
                          >
                            <a-select-option v-for="(d,key) in portData" :value="d.value">
                              {{ d.text }}
                            </a-select-option>
                          </a-select>
                        </a-col>
                        <a-col :span="1">
                        </a-col>
                        <a-col :span="15">
                          <a-input style="width: 100%" placeholder="" v-model="pane.receiveAddressDesc" />
                        </a-col>
                      </a-row>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-divider dashed />
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-row style="line-height: 39px">
                      <a-col :span="5">发货人：</a-col>
                      <a-col :span="9">
                        <a-select allowClear showSearch placeholder="选择发货人" labelInValue @change="fChange">
                          <a-select-option v-for="(item, key) in shoufatongData" :label="item.show" :key="key"
                                           :value="item.value">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-form-item label="" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                        <a-textarea :rows="4" v-model="pane.consignor" placeholder="请输入发货人"></a-textarea>
                      </a-form-item>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row style="line-height: 39px">
                      <a-col :span="5">收货人：</a-col>
                      <a-col :span="9">
                        <a-select allowClear showSearch placeholder="选择收货人" labelInValue @change="sChange">
                          <a-select-option v-for="(item, key) in shoufatongData" :label="item.show" :key="key"
                                           :value="item.value">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-form-item label="" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                        <a-textarea :rows="4" v-model="pane.consignee" placeholder="请输入收货人"></a-textarea>
                      </a-form-item>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row style="line-height: 39px">
                      <a-col :span="5">通知人：</a-col>
                      <a-col :span="9">
                        <a-select allowClear showSearch placeholder="选择通知人" labelInValue @change="tChange">
                          <a-select-option v-for="(item, key) in shoufatongData" :label="item.show" :key="key"
                                           :value="item.value">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-form-item label="" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                        <a-textarea :rows="4" v-model="pane.notifier" placeholder="请输入通知人"></a-textarea>
                      </a-form-item>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row style="line-height: 39px">
                      <a-col :span="5">第二通知人：</a-col>
                      <a-col :span="9">
                        <a-select allowClear showSearch placeholder="选择第二通知人" labelInValue @change="deChange">
                          <a-select-option v-for="(item, key) in shoufatongData" :label="item.show" :key="key"
                                           :value="item.value">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-form-item label="" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                        <a-textarea :rows="4" v-model="pane.secNotifier" placeholder="请输入第二通知人"></a-textarea>
                      </a-form-item>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-row style="line-height: 39px">
                      <a-col :span="5">国外代理：</a-col>
                      <a-col :span="9">
                        <a-select allowClear showSearch placeholder="选择国外代理" labelInValue @change="gwChange">
                          <a-select-option v-for="(item, key) in shoufatongData" :label="item.show" :key="key"
                                           :value="item.value">
                            {{ item.text }}
                          </a-select-option>
                        </a-select>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-form-item label="" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                        <a-textarea :rows="4" v-model="pane.formForeignAgent" placeholder="请输入国外代理"></a-textarea>
                      </a-form-item>
                    </a-row>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="唛头" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-model="pane.shipMarks" placeholder="请输入唛头"></a-textarea>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item label="货物描述" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                      <a-textarea :rows="4" v-model="pane.enName" placeholder="SHIPPER'S LOAD COUNT&SEAL
SAID TO CONTAIN"></a-textarea>
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-col :span="8">
                  <a-form-item label="委托总件数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input-group>
                      <a-input-number
                        v-model="pane.total"
                        style="width:60%"
                        placeholder="总件数"
                        step="0.01"
                        @blur="handleBlur"
                      />
                      <j-dict-select-tag style="width: 40%;" type="list"
                                         v-model="pane.totalType"
                                         dictCode="total_type"
                                         @change="totalCapChange" :trigger-change="true"
                                         placeholder="请选择" />

                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="委托总毛重" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-model="pane.totalGrossWeight" placeholder="请输入总毛重" type="number"
                             suffix="KGS"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="委托总体积" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-model="pane.totalVolume" placeholder="请输入总体积" type="number" suffix="CBM"></a-input>
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item label="总件数大写" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-model="pane.totalCap" placeholder="请输入件数大写"></a-input>

                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="付款方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-dict-select-tag type="list" v-model="pane.payType"
                                       dictCode="pay_type"
                                       placeholder="请选择付款方式" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="运输条款" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-dict-select-tag type="list" v-model="pane.transportClause"
                                       dictCode="transport_clause"
                                       placeholder="请选择运输条款" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="签单方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-dict-select-tag type="list" v-model="pane.formLading"
                                       dictCode="form_lading"
                                       placeholder="请选择签单方式" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="签单日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-date placeholder="请选择签单日期" v-model="pane.signBillTime"
                            date-format="YYYY-MM-DD" :trigger-change="true"
                            style="width: 100%" />
                  </a-form-item>
                </a-col>

                <a-col :span="8">
                  <a-form-item label="签单地点" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input v-model="pane.signBillAddress" placeholder="请输入签单地点"></a-input>

                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="提单份数" :labelCol="labelCol" :wrapperCol="wrapperCol">

                    <j-dict-select-tag type="list" v-model="pane.numberOfBill"
                                       dictCode="ship_number"
                                       placeholder="请选择提单份数" />

                  </a-form-item>
                </a-col>

                <a-col :span="24">
                  <a-form-item label="提单备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2" style="margin-bottom: 26px">
                    <a-textarea :rows="4" v-model="pane.billRemark" placeholder="请输入提单备注"></a-textarea>
                  </a-form-item>
                </a-col>


              </a-tab-pane>
            </a-tabs>
          </a-tab-pane>
          <a-button v-if="mhkey === '2'" type="primary" slot="tabBarExtraContent" @click="copyBasic" icon="plus">
            新建
          </a-button>
          <a-button v-if="mhkey === '2'" type="primary" slot="tabBarExtraContent" style="margin-left: 10px"
                    @click="copyCreate" icon="snippets">
            复制新建
          </a-button>
        </a-tabs>
        <div style="margin-top: 30px"></div>
        <div
          :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 999,
        }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="allclose">
            关闭
          </a-button>
          <a-button type="primary" @click="saveForm">
            保存
          </a-button>

        </div>
      </a-form>


    </j-form-container>

  </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'

import JDate from '@/components/jeecg/JDate'
import { validateDuplicateValue } from '@/utils/util'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'

import JFormContainer from '@/components/jeecg/JFormContainer'
import JAreaLinkage from '@/components/jeecg/JAreaLinkage'

const MBLpanes = [
  {
    title: '提单' +
      '1', key: '1', closable: false,
    // customsNumber: [],
    customsNumber: '',
    formForeignAgent: '',
    shipMarks: '',
    enName: 'SHIPPER\'S LOAD COUNT&SEAL\n' +
      'SAID TO CONTAIN',
    payType: '',
    transportClause: '',
    formLading: '',
    pieceNumber: '',
    pieceNumberUnit: '',
    totalWeight: '',
    totalVolume: '',
    billRemark: '',
    consignor: '',
    consignee: '',
    notifier: '',
    secNotifier: '',
    type: 'MBL'
  }
]
const HBLpanes = [
  {
    title: '提单' +
      '1', key: '1', closable: false,
    customsNumber: '',
    otherCustomsNumber: '',
    // customsNumber: [],
    // otherCustomsNumber: [],
    formForeignAgent: '',
    shipMarks: '',
    enName: 'SHIPPER\'S LOAD COUNT&SEAL\n' +
      'SAID TO CONTAIN',
    billRemark: '',
    consignor: '',
    consignee: '',
    notifier: '',
    secNotifier: '',
    type: 'HBL',
    etd: '',
    shipName: '',
    voyageNumber: '',
    receiveAddress: {},
    receiveAddressDesc: '',
    portDeparture: { value: 'CNTAO', key: 'CNTAO' },
    polRemark: '',
    portDestination: {},
    podRemark: '',
    placeDelivery: {},
    placeDeliveryDesc: '',
    destination: {},
    destinationDesc: '',
    prepaidAt: {},
    prepaidAtDesc: '',
    arrivalPlace: {},
    arrivalPlaceDesc: '',
    total: '',
    totalType: '',
    totalGrossWeight: '',
    totalVolume: '',
    totalCap: '',
    payType: '',
    transportClause: '',
    formLading: '',
    signBillTime: '',
    signBillAddress: '',
    numberOfBill: ''
  }
]
const columns = [
  {
    title: '箱号',
    dataIndex: 'boxnum'
  },
  {
    title: '封号',
    dataIndex: 'title'
  },
  {
    title: '箱型',
    dataIndex: 'boxtype'
  },
  {
    title: '分件数',
    dataIndex: 'fjs'
  },
  {
    title: '单位',
    dataIndex: 'company'
  },
  {
    title: '分重量(KGS)',
    dataIndex: 'fweight'
  },
  {
    title: '分体积(CBM)',
    dataIndex: 'ftj'
  }
]
const data = [
  {
    key: '1',
    boxnum: 'John Brown',
    title: '￥300,000.00',
    fjs: 'New York No. 1 Lake Park',
    company: 'New York No. 1 Lake Park',
    fweight: 'New York No. 1 Lake Park',
    ftj: 'New York No. 1 Lake Park'
  },
  {
    key: '2',
    boxnum: 'John Brown',
    title: '￥300,000.00',
    fjs: 'New York No. 1 Lake Park',
    company: 'New York No. 1 Lake Park',
    fweight: 'New York No. 1 Lake Park',
    ftj: 'New York No. 1 Lake Park'
  },
  {
    key: '3',
    boxnum: 'John Brown',
    title: '2200.00',
    fjs: 'New York No. 1 Lake Park',
    company: 'New York No. 1 Lake Park',
    fweight: 'New York No. 1 Lake Park',
    ftj: 'New York No. 1 Lake Park'
  }
]
const plainOptions = ['Apple', 'Pear', 'Orange']
export default {
  name: 'BillManageForm',
  components: {
    JDate,
    JFormContainer,
    JAreaLinkage,
    JDictSelectTag,
    JMultiSelectTag
  },
  props: {
    //流程表单data
    formData: {
      type: Object,
      default: () => {
      },
      required: false
    },
    //表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      portData: [],//港口数据
      mhkey: '1',
      modelId: '',
      mainOffNumberData: [],
      otherOffNumberData: [],
      formDisabled: false,
      addVisible: true,
      data,
      columns,
      plainOptions,
      isDisableHBL: true,
      isDisableMBL: true,
      MBLTabIndex: 1,
      HBLTabIndex: 1,
      mblactiveKey: MBLpanes[0].key,
      hblactiveKey: HBLpanes[0].key,
      MBLpanes,
      HBLpanes,
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      labelCol4: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      labelCol1: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      addrwrapper: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 23 }
      },
      confirmLoading: false,
      validatorRules: {},
      getPortDataUrl: '/box/dictPort/findbyname',
      url: {
        add: '/box.ship/shipInfo/tidan/add',
        edit: '/billmanage/billManage/edit',
        queryById: '/billmanage/billManage/queryById',
        queryNumberById: '/box.ship/shipInfo/tidan/queryByShipId'
      },
      isrefresh: 0,
      record: {},
      shoufatongData: []
    }
  },
  computed: {},
  created() {
    this.isDisableMBL = true
    this.isDisableHBL = true
    //获取收发通信息
    getAction('/box.shoufatong/shipContactsInfo/getall').then(res => {
      let shoufatongDataList = []
      for (let i = 0; i < res.result.length; i++) {
        shoufatongDataList.push({
          show: res.result[i].details,
          value: res.result[i].companyName,
          text: res.result[i].companyName
        })
      }
      this.shoufatongData = shoufatongDataList
    })
  },
  watch: {
    MBLpanes: {
      handler() {
        this.isrefresh += 1
        if (this.isrefresh > 2) {
          this.$emit('isEditFunctino', true)
        }
      },
      deep: true
    },
    HBLpanes: {
      handler() {
        this.isrefresh += 1
        if (this.isrefresh > 2) {
          this.$emit('isEditFunctino', true)
        }
      },
      deep: true
    }
  },
  methods: {
    questId(id) {
      console.log('id:' + id)
      this.modelId = id
      this.selectAllNumber(id)

    },
    requestDetail(val) {
      this.record = val
      console.log(val)
    },
    praseStrEmpty(str) {
      if (!str || str == 'undefined' || str == 'null') {
        return ''
      }
      return str
    },
    selectAllNumber(id) {
      console.log('selectAllNumberid:' + id)
      var that = this
      let httpurl = ''
      httpurl += this.url.queryNumberById
      let params = { 'shipId': id }
      getAction(httpurl, params).then((res) => {
        if (res.success) {
          // that.HBLpanes = res.result.hbl;
          // that.MBLpanes = res.result.mbl;
          // console.log(' res.result.mainOffNumberData:' + res)
          //TODO 主单号分单号改为手输
          // that.mainOffNumberData = JSON.parse(res.result.mainOffNumberData)
          // that.otherOffNumberData = JSON.parse(res.result.otherOffNumberData)
          if (res.result.hbl.length > 0) {
            console.log('进入hbl')
            that.HBLpanes = res.result.hbl
            that.HBLpanes.map(function(panes, K) {
              console.log(K)
              panes.key = K + 1 + ''
              that.HBLTabIndex = K + 1
              for (var key in panes) {
                panes[key] = that.praseStrEmpty(panes[key])
              }
              // panes.consignee = JSON.parse(panes.consignee);
              // panes.consignor = JSON.parse(panes.consignor);
              // panes.notifier = JSON.parse(panes.notifier);
              // panes.secNotifier = JSON.parse(panes.secNotifier);
              // panes.customsNumber = JSON.parse(panes.customsNumber)
              // panes.otherCustomsNumber = JSON.parse(panes.otherCustomsNumber)
            })
          }
          if (res.result.mbl.length > 0) {
            console.log('进入mbl')

            that.MBLpanes = res.result.mbl
            that.MBLpanes.map(function(panes, i) {
              console.log(i)
              panes.key = i + 1 + ''
              that.MBLTabIndex = i + 1
              for (var key in panes) {
                panes[key] = that.praseStrEmpty(panes[key])
              }
              // panes.consignee = JSON.parse(panes.consignee);
              // panes.consignor = JSON.parse(panes.consignor);
              // panes.notifier = JSON.parse(panes.notifier);
              // panes.secNotifier = JSON.parse(panes.secNotifier);
              // panes.customsNumber = JSON.parse(panes.customsNumber)
            })
            // console.log(that.MBLpanes)
          }
          //
          if (that.MBLpanes.length == 1) {
            that.MBLpanes[0].closable = false
          }
          if (that.HBLpanes.length == 1) {
            that.HBLpanes[0].closable = false
          }
          console.log('mainOffNumberData:' + that.mainOffNumberData)
          // that.$message.success(res.message)
          // that.$emit('ok')
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    },
    saveForm() {

      const that = this
      let formvalues = {
        mbl: that.MBLpanes,
        hbl: that.HBLpanes,
        shipId: that.modelId
      }
      console.log(formvalues)
      that.confirmLoading = true
      let httpurl = this.url.add
      let method = 'post'
      let formData = Object.assign({}, formvalues)

      // console.log('表单提交数据', formData)
      httpAction(httpurl, formData, method).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('allOk')
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })

    },

    allclose() {
      this.$emit('allclose')
    },
    confirmMBLName(index) {
      if (!this.inputcontent) {
        this.$message.error('内容不可为空!')
        return
      }
      this.MBLpanes[index].title = this.inputcontent
      this.isDisableMBL = true

    },
    confirmHBLName(index) {
      if (!this.inputcontent) {
        this.$message.error('内容不可为空!')
        return
      }
      this.HBLpanes[index].title = this.inputcontent
      this.isDisableHBL = true

    },
    changeMBLName(value) {
      this.isDisableMBL = false
      this.inputcontent = value

    }, changeHBLName(value) {

      this.isDisableHBL = false
      this.inputcontent = value

    },

    changeNameMBLCance(index) {
      this.isDisableMBL = true
      // this.panes[index].content =  this.panes[index].title
    },
    changeNameHBLCance(index) {
      this.isDisableHBL = true
      // this.panes[index].content =  this.panes[index].title
    },
    mblonEdit(targetKey, action) {
      console.log(targetKey)
      console.log(action)
      this['mbl' + action](targetKey)
    },
    hblonEdit(targetKey, action) {
      console.log(targetKey)
      console.log(action)
      this['hbl' + action](targetKey)
    },
    mbladd() {
      const panes = this.MBLpanes
      const mblactiveKey = `提单${this.MBLTabIndex++}`
      panes.push({
        title: '提单' + this.MBLTabIndex, key: mblactiveKey,
        customsNumber: [],
        formForeignAgent: '',
        shipMarks: '',
        enName: 'SHIPPER\'S LOAD COUNT&SEAL\n' +
          'SAID TO CONTAIN',
        payType: '',
        transportClause: '',
        formLading: '',
        pieceNumber: '',
        pieceNumberUnit: '',
        totalWeight: '',
        totalVolume: '',
        billRemark: '',
        consignor: '',
        consignee: '',
        notifier: '',
        secNotifier: '',
        type: 'MBL'
      })
      this.MBLpanes = panes
      this.mblactiveKey = mblactiveKey
      this.MBLpanes.forEach((pane, i) => {
        pane.closable = true
      })
    },
    hbladd() {
      const panes = this.HBLpanes
      let htIndex = this.HBLTabIndex + 1
      const hblactiveKey = '提单' + htIndex
      panes.push({
        title: '提单' + htIndex, key: hblactiveKey,
        customsNumber: [],
        otherCustomsNumber: [],
        formForeignAgent: '',
        shipMarks: '',
        enName: 'SHIPPER\'S LOAD COUNT&SEAL\n' +
          'SAID TO CONTAIN',
        billRemark: '',
        consignor: '',
        consignee: '',
        notifier: '',
        secNotifier: '',
        type: 'HBL',
        etd: '',
        shipName: '',
        voyageNumber: '',
        receiveAddress: {},
        receiveAddressDesc: '',
        portDeparture: { value: 'CNTAO', key: 'CNTAO' },
        polRemark: '',
        portDestination: {},
        podRemark: '',
        placeDelivery: {},
        placeDeliveryDesc: '',
        destination: {},
        destinationDesc: '',
        prepaidAt: {},
        prepaidAtDesc: '',
        arrivalPlace: {},
        arrivalPlaceDesc: '',
        total: '',
        totalType: '',
        totalGrossWeight: '',
        totalVolume: '',
        totalCap: '',
        payType: '',
        transportClause: '',
        formLading: '',
        signBillTime: '',
        signBillAddress: '',
        numberOfBill: ''
      })
      this.HBLpanes = panes
      this.hblactiveKey = hblactiveKey
      this.HBLpanes.forEach((pane, i) => {
        pane.closable = true
      })
      this.HBLTabIndex = htIndex
    },
    mblremove(targetKey) {
      console.log(targetKey)
      this.isDisableMBL = true
      let mblactiveKey = this.mblactiveKey
      let lastIndex
      this.MBLpanes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.MBLpanes.filter(pane => pane.key !== targetKey)
      if (panes.length && mblactiveKey === targetKey) {
        if (lastIndex >= 0) {
          mblactiveKey = panes[lastIndex].key
        } else {
          mblactiveKey = panes[0].key
        }
      }
      if (panes.length == 1) {
        panes[0].closable = false
      }
      this.MBLpanes = panes
      this.mblactiveKey = mblactiveKey
    },
    hblremove(targetKey) {
      this.isDisableHBL = true
      let hblactiveKey = this.hblactiveKey
      let lastIndex
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.HBLpanes.filter(pane => pane.key !== targetKey)
      if (panes.length && hblactiveKey === targetKey) {
        if (lastIndex >= 0) {
          hblactiveKey = panes[lastIndex].key
        } else {
          hblactiveKey = panes[0].key
        }
      }
      if (panes.length == 1) {
        panes[0].closable = false
      }
      this.HBLpanes = panes
      this.hblactiveKey = hblactiveKey
    },
    searchPort(val) {
      let params = { name: val }
      getAction(this.getPortDataUrl, params).then(res => {
        if (res.code == 200) {
          let data = []
          res.result.forEach(item => {
            data.push({
              value: item.wzm,
              text: item.showText
            })
          })
          this.portData = data
        }
      })
    },
    //计算英文金额
    handleBlur() {
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          let total = pane.total
          let totalType = pane.totalType
          if (totalType && total) {
            pane.totalCap = this.intergernumber(total.toString()) + ' ' + totalType + ' ONLY'
          }
        }
      })
      // }
    },
    //计算英文金额
    totalCapChange(v) {
      if (v) {
        this.HBLpanes.forEach((pane, i) => {
          if (pane.key === this.hblactiveKey) {
            let total = pane.total
            pane.totalCap = this.intergernumber(total.toString()) + ' ' + v + ' ONLY'
          }
        })
      } else {
        this.HBLpanes.forEach((pane, i) => {
          if (pane.key === this.hblactiveKey) {
            pane.totalCap = ''
          }
        })
      }
    },
    //数字金额转英文大些
    intergernumber(a) {
      let arr1 = new Array('', ' thousand', ' million', ' billion')

      let b = a.length
      let f = 0
      let h = 0
      let g = ''
      let e = Math.ceil(b / 3)
      let k = b - e * 3
      let num3 = ''
      let strEng = ''
      for (f = k; f < b; f += 3) {
        ++h
        num3 = f >= 0 ? a.substring(f, f + 3) : a.substring(0, k + 3)
        strEng = this.English(num3)
        if (strEng != '') {
          if (g != '') g += ','
          g += this.English(num3) + arr1[e - h]
        }
      }
      return 'SAY ' + g.toUpperCase()
    },

    English(a) {
      let
        arr2 = new Array('zero', 'ten', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'),
        arr3 = new Array('zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'),
        arr4 = new Array('ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen')

      let strRet = ''
      if (a.length == 3 && a.substr(0, 3) != '000') {
        if (a.substr(0, 1) != '0') {
          strRet += arr3[a.substr(0, 1)] + ' hundred'
          if (a.substr(1, 2) != '00') strRet += ' and '
        }
        a = a.substring(1)
      }
      if (a.length == 2) {
        if (a.substr(0, 1) == '0') {
          a = a.substring(1)
        } else if (a.substr(0, 1) == '1') {
          strRet += arr4[a.substr(1, 2)]
        } else {
          strRet += arr2[a.substr(0, 1)]
          if (a.substr(1, 1) != '0') strRet += '-'
          a = a.substring(1)
        }
      }
      if (a.length == 1 && a.substr(0, 1) != '0') strRet += arr3[a.substr(0, 1)]
      return strRet
    },
    //收货地选择后回显
    portDataChangeReceiveAddress(value) {
      // console.log(value)
      // console.log(this.hblactiveKey)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.receiveAddress = { value: value.key, key: value.key + ' ' }
          pane.receiveAddressDesc = portEnName
        }
      })
    },
    //起运港选择后回显
    portDataChangePol(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      // this.form.setFieldsValue({ 'portDeparture': { value: value.key, key: value.key + ' ' } })
      // this.form.setFieldsValue({ 'polRemark': portEnName })
      console.log(this.HBLpanes)
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.portDeparture = { value: value.key, key: value.key + ' ' }
          pane.polRemark = portEnName
        }
      })
    },
    //交货地选择后回显
    portDataChangePlaceDelivery(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      // this.form.setFieldsValue({ 'placeDelivery': { value: value.key, key: value.key + ' ' } })
      // this.form.setFieldsValue({ 'placeDeliveryDesc': portEnName })
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.placeDelivery = { value: value.key, key: value.key + ' ' }
          pane.placeDeliveryDesc = portEnName
        }
      })
    },
    //预付地点选择后回显
    portDataChangePlacePrepaidAt(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      // this.form.setFieldsValue({ 'prepaidAt': { value: value.key, key: value.key + ' ' } })
      // this.form.setFieldsValue({ 'prepaidAtDesc': portEnName })
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.prepaidAt = { value: value.key, key: value.key + ' ' }
          pane.prepaidAtDesc = portEnName
        }
      })
    },
    //到付地点选择后回显
    portDataChangePlaceArrivalPlace(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      // this.form.setFieldsValue({ 'arrivalPlace': { value: value.key, key: value.key + ' ' } })
      // this.form.setFieldsValue({ 'arrivalPlaceDesc': portEnName })
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.arrivalPlace = { value: value.key, key: value.key + ' ' }
          pane.arrivalPlaceDesc = portEnName
        }
      })
    },
    //目的地选择后回显
    portDataChangePlaceDestination(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      // this.form.setFieldsValue({ 'destination': { value: value.key, key: value.key + ' ' } })
      // this.form.setFieldsValue({ 'destinationDesc': portEnName })
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.destination = { value: value.key, key: value.key + ' ' }
          pane.destinationDesc = portEnName
        }
      })
    },
    //目的港选择后回显
    portDataChangePod(value) {
      // console.log(value)
      let portEnName = value.label.toString().trim().substr(value.label.toString().trim().indexOf(',') + 1, value.label.toString().trim().length)
      // this.form.setFieldsValue({ 'portDestination': { value: value.key, key: value.key + ' ' } })
      // this.form.setFieldsValue({ 'podRemark': portEnName })
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.portDestination = { value: value.key, key: value.key + ' ' }
          pane.podRemark = portEnName
        }
      })
    },
    copyBasic() {
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.consignor = this.record.consignor
          pane.consignee = this.record.consignee
          pane.notifier = this.record.notifier
          pane.secNotifier = this.record.secNotifier
          pane.formForeignAgent = this.record.formForeignAgent
          pane.shipMarks = this.record.shipMarks
          pane.enName = this.record.enName
          pane.etd = this.record.etd
          pane.shipName = this.record.shipName
          // pane.enName = this.record.enName
          pane.voyageNumber = this.record.voyageNumber
          pane.receiveAddress = this.record.receiveAddress
          pane.receiveAddressDesc = this.record.receiveAddressDesc
          pane.portDeparture = this.record.portDeparture
          pane.polRemark = this.record.polRemark
          pane.portDestination = this.record.portDestination
          pane.podRemark = this.record.podRemark
          pane.placeDelivery = this.record.placeDelivery
          pane.placeDeliveryDesc = this.record.placeDeliveryDesc
          pane.destination = this.record.destination
          pane.destinationDesc = this.record.destinationDesc
          pane.prepaidAt = this.record.prepaidAt
          pane.prepaidAtDesc = this.record.prepaidAtDesc
          pane.arrivalPlace = this.record.arrivalPlace
          pane.arrivalPlaceDesc = this.record.arrivalPlaceDesc
          pane.total = this.record.total
          pane.totalType = this.record.totalType
          pane.totalGrossWeight = this.record.totalGrossWeight
          pane.totalVolume = this.record.totalVolume
          pane.totalCap = this.record.totalCap
          pane.payType = this.record.payType
          pane.transportClause = this.record.transportClause
          pane.formLading = this.record.formLading
          pane.signBillTime = this.record.signBillTime
          pane.signBillAddress = this.record.signBillAddress
          pane.numberOfBill = this.record.numberOfBill
          // pane.shipMarks = this.record.shipMarks
        }
      })
    },
    copyCreate() {
      const panes = this.HBLpanes
      const hblactiveKey = `提单${this.HBLTabIndex++}`

      let newpanes
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          // let  newpanes2 = pane;
          newpanes = JSON.parse(JSON.stringify(pane))
        }
      })
      newpanes.title = '提单' + this.HBLTabIndex
      newpanes.key = hblactiveKey
      newpanes.id = ''

      console.log(newpanes)
      panes.push(newpanes)
      this.HBLpanes = panes
      this.hblactiveKey = hblactiveKey
      this.HBLpanes.forEach((pane, i) => {
        pane.closable = true
      })
    },
    fChange(value, option) {
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.consignor = option.componentOptions.propsData.label
        }
      })
    },
    sChange(value, option) {
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.consignee = option.componentOptions.propsData.label
        }
      })
    },
    tChange(value, option) {
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.notifier = option.componentOptions.propsData.label
        }
      })
    },
    deChange(value, option) {
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.secNotifier = option.componentOptions.propsData.label
        }
      })
    },
    gwChange(value, option) {
      this.HBLpanes.forEach((pane, i) => {
        if (pane.key === this.hblactiveKey) {
          pane.formForeignAgent = option.componentOptions.propsData.label
        }
      })
    }
  }
}
</script>

<style scoped>
/** Button按钮间距 */
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/deep/ .ant-form-item-label {
  text-align: left;
}

/deep/ .ant-form-item {
  margin-bottom: 0px;
}
</style>